#{extends 'organization.html' /} 
#{set 'moreScripts'}
    #{script 'rating-script.js'/}
    #{script 'fading-in-out.js'/}
    
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="@{'/public/javascripts/jquery.fancybox-1.3.4.pack.js'}"></script>

<link rel="stylesheet" href="@{'/public/stylesheets/jquery.fancybox-1.3.4.css'}" type="text/css" media="screen" />
<script type="text/javascript"
	src="@{'/public/javascripts/jquery.color.js'}"></script>
	<script type="text/javascript"
	src="/public/javascripts/jquery.tokeninput.js"></script>
<link rel="stylesheet" type="text/css"
	href="/public/stylesheets/token-input-facebook.css" />
<link rel="stylesheet" type="text/css"
	href="/public/stylesheets/token-input.css" />
<link rel="stylesheet" type="text/css"
	href="/public/stylesheets/Sharing.css" />
	
#{/set}
#{set 'moreStyles'}
#{styleSheet 'rating.css'/}
#{/set}
 <div class="viewContent">
#{if view==0}
<h2>Sorry, you are trying to view a non existing idea</h2>
#{/if} #{else}
	#{if flash.success}
		<h2 style="color:GREEN"> <img src="@{'public/images/tick-icon.png'}"/>  ${flash.success}</h2>
		#{/if}
		#{if flash.error}
		<h2 style="color:Red"> <img src="@{'public/images/error.png'}"/>  ${flash.error}</h2>
		#{/if}
    #{if !(idea.isHidden)}
	#{if (isOrganizer||isOrgLead)}
	<a  href="@{Browse.hideIdea(idea.id)}" class="standardLink">Hide Idea</a>
	#{/if}
	#{/if}
	#{if (idea.isHidden)}
	#{if (isOrganizer||isOrgLead)}
	<a  href="@{Browse.showIdea(idea.id)}" class="standardLink">Show Idea</a>
	#{/if}
	#{/if}
 #{set title:idea.title /} #{if view==1}
<h2>
	Sorry, you are not allowed to view this idea.<br /> You are either not
	logged in or not a member of the organization
</h2>
#{/if} 
#{else} #{if idea.isDraft}
<h2> Sorry, you can not view this idea because it is not published yet.</h2>
#{/if}
#{else}
<div class="idea">
		<h2 class="idea-title" align="center"> ${idea.title}</h2>
		#{if isCreatedByUser}

<a style="float:right" href="@{IdeaController.viewAddVideo(idea.id)}"><img alt="Add/Remove a Video" title="Add/Remove a Video"src="@{'/public/images/video.png'}"></img></a>
#{/if}

#{if !(isOrgLead||isOrganizer||isRquestedbyUser||idea.isPromoted)}
	<a style="float:right" href="@{IdeaController.viewRequestMerge(idea.id)}"><img alt="Request Merging this idea with another idea." title="Request Merging this idea with another idea." src="@{'public/images/merge.png'}"/></a>
	#{/if}
	<h5 class="idea-priority" id="priority-display-message" align="center">Priority:
		${priorityMsg}</h5>
		<br>
		#{if isOrganizer == true}
		<a href="@{Browse.prioritizeIdea(idea.id)}" class="standardLink">Change Priority Level</a>
		#{/if}
	<div class="idea-meta-data" align="center">
	
		<span class="idea-content" style="font-style: italic; font-family: monospace; font-size: xx-large;"> Content: ${idea.content.raw()} <br>
		</span>
		<a href="@{Browse.markAsDuplicate(idea.id)}" class="standardLink">Mark Idea as duplicate with another idea under this same topic!</a>
#{if allowedToRate && !(idea.isPromoted)}
	#{Fat7y.Tags.rating idea:idea/}
	<div class = "report">
	#{form @NotificationController.viewReportPageIdea(idea.id)}
	<input type="submit" name= "viewReport" value ="Report Idea">
	#{/form}
	</div>
	#{/if}		 
	
 #{if (session.get("username")==null) || session.get("username").equalsIgnoreCase("guest")}
 <div> <span> Share</span>
 </div>
 #{/if} #{else} 
 





<div class="videoSlider" id = "vs">
#{if idea.videos.size!=0}
Videos:

    <ul>
    #{list idea.videos,as:'video'}
        <a id="inline" href="#${video}"><img src="http://img.youtube.com/vi/${video}/2.jpg"/></a>
    
        
        
        <div style="display:none">


	<div id="${video}"><iframe name ="frame"  width="560" height="349"  src="http://www.youtube.com/embed/${video}" frameborder="0" allowfullscreen></iframe>
	</div>
</div>

    #{/list}
        </ul>
        #{/if}
</div>



 <script type="text/javascript">
	$(document).ready(function() {	
	

});
</script>


 <div id="share">

	<a class="standardLink" style="float: left"href="#sharingForm" >share</a>

</div>

<form id="sharingForm" action="" method="post" name="shareForm">

	<h2>Share ideas...</h2>
	<ul>
		<li><label style="padding-top: .5em;">Your Message</label> <textarea
				name="message" id="message" placeholder="Please type your message"
				cols="80" rows="10" maxlength="10000"></textarea>
		</li>
		<li><label style="padding-top: .5em;">Share with:</label> <textarea
				type="text" name="names" id="names" maxlength="10000"></textarea>
				</li>
		
		
	</ul>

	  <div id="formButtons">
	<input type="submit" id="myShare" name="share" value="Share" /> <input
		type="button" id="cancelShare" name="cancel" value="Cancel" />
	 </div>
</form>

<script type="text/javascript">
	$(document).ready(function() {
	
		$("#names").tokenInput("@{Sharing.searchUser(q)}", {
			theme : "facebook"
		});
		
    $("a#inline").fancybox({
		'hideOnContentClick': false
	});

	});
</script>

<div id="sharing" class="statusMessage">
	<p>The idea is being shared. Please wait...</p>
</div>
<div id="shared" class="statusMessage">
	<p>The idea has been shared successfully</p>
</div>
<div id="failed" class="statusMessage">
	<p>There was a problem sharing the idea. Please try again.</p>
</div>
<div id="emptyList" class="statusMessage">
	<p>You have to enter at least one person.</p>
</div>
</div>
 #{/else}
 <span class="idea-date"> Posted at: ${idea.date} <br> </span>
		<span class="idea-creator"> Posted by: ${idea.creator.name} <br>
		</span>
		<span class="idea-topic" >Posted under topic: <a href="@{Browse.viewTopic(idea.topic.id)}" class="standardLink">${idea.topic.name} </a><br></span>
		<br/>
		<span class="similar-ideas">This idea was marked as duplicate with ${idea.duplicateIdeas.size() ?: 'NO'} other idea(s) under the topic ${idea.topic.name}! <br>
		#{list items:idea.duplicateIdeas, as:'duplicate'}
		<a href="@{Browse.viewIdea(duplicate.id)}" class="standardLink">${duplicate.title}</a>
		#{if isOrganizer}
		<br/>
		<a href="@{Browse.removeDuplicateIdea(idea.id, duplicate.id)}" class="standardLink">Remove</a>
		<br/>
		#{/if}
		#{/list}
		</span>	
	</div>
	




#{if isAllowedTopromote && !(idea.isPromoted)}
<br/><br/>
<div class = "promote">
#{form @Application.promoteIdea(idea.id)}
<input type="submit" name= "promote" value ="Promote this Idea for execution!">
#{/form}
</div>
#{/if}

#{if isAllowedTopromote && idea.isPromoted && idea.plans.isEmpty()}
<div class = "unPromote">
#{form @Application.unPromoteIdea(idea.id)}
<input type="submit" name= "unpromote" value ="UnPromote this Idea from any executing Plans!">
#{/form}
</div>
#{/if}



<div class="comments">
	<br/><br/>
	<h3>${idea.comments.size() ?: 'No'} comments are available</h3>

	#{list items:idea.comments, as:'comment'}
	<div class="comment">
		<span class="comment-content"> Content: ${comment.content} <br>
		</span> <span class="comment-rating"> Rating: ${comment.rating} <br>
		</span> <span class="comment-date"> Posted at: ${comment.time} <br>
		</span> <span class="idea-creator"> Posted by: ${comment.creator.name}
			<br>
		<br> </span>
		
	#{if allowedToRate}
	<div class = "report">
	#{form @NotificationController.viewReportPageComment(comment.id)}
	<input type="submit" name= "viewReport" value ="Report Comment">
	#{/form}
	</div>
	#{/if}
	</div>
	
	
	#{/list}
	<form action="@{Application.saveComment()}" method="GET">
		#{if (!idea.isPromoted) && (idea.topic.entity.organization.isMember(idea.id))}
			<input type = text name = content></input>
			<input type = hidden name = ideaID value = ${idea.id}></input>
			<input type = submit value = comment>
			<span style="color:RED">#{error 'content' /}</span>
		#{/if}
	</form>
</div>



<div class="plans">
	<br/><br/>
	<h3>${idea.plans.size() ?: 'No'} plans are executing this idea.</h3>

	#{list items:idea.plans, as:'plan'}
	<div class="plan">
		 <a href="@{Application.showPlan(plan.id)}">${plan.title}</a>
	</div>
	#{/list} 
</div>

	#{if isAllowedToTag}
	<br/><br/>
	<p>
	You can edit tags of this Idea!</p>

	#{form @TopicController.viewTagIdea(idea.id)}
	<input type="submit" value = "Tag this Idea!"><br />
	#{/form}
	
	#{/if}
	
	#{if isAllowedToDelete}
	<br/><br/>
	<p>
	Idea getting silly? Delete it now!
	</p>

	#{form @TopicController.deleteIdea(idea.topic.id, idea.id)}
	<input type="submit" value = "Delete this Idea from topic: ${idea.topic.name}"><br />
	#{/form}
	
	#{/if}
	
	


#{/else}#{/else}

<script type=text/javascript> 

var messageDelay = 2000; 
var ideaId = 0;// How long to display status messages (in
// milliseconds)

// Init the form once the document is ready
$(init);

// Submit the form via Ajax

function shareIdea() {
	var sharingForm = $('#sharingForm');
	// Are all the fields filled in?

	if ($('#names').val() == "") {
		// No; display a warning message and return to the form
		$('#emptyList').fadeIn().delay(messageDelay).fadeOut();
		sharingForm.fadeOut().delay(messageDelay).fadeIn();

	} else {

		// Yes; submit the form via Ajax

		$('#sharing').fadeIn();
		sharingForm.fadeOut();
		if (!$('#message').val())
			$.post('/sharing/shareIdea/' + 'null/'
					+ ${idea.id} + '/'
					+ document.shareForm.names.value, function(data) {
				shareDone("success");
			});
		else
			$.post('/sharing/shareIdea/' + document.shareForm.message.value+'/'
					+ ${idea.id}+'/' + document.shareForm.names.value, function(data) {
				document.shareForm.names.value = "";
				shareDone("success");
			});
		
	}
	// Prevent the default form submission occurring
	return false;
}

// Initialize the form

function init() {

	// Hide the form initially.
	// Make submitForm() the form's submit handler.
	// Position the form so it sits in the centre of the browser window.
	$('#sharingForm').hide().addClass('positioned');
	$('#myShare').click(shareIdea);
	// When the "Send us feedback" link is clicked:
	// 1. Fade the content out
	// 2. Display the form
	// 3. Move focus to the first field
	// 4. Prevent the link being followed

	$('a[href="#sharingForm"]').click(function() {
		$('#share').fadeTo('slow', .2);
		$('#sharingForm').fadeIn('slow', function() {
		})

		return false;
	});

	// When the "Cancel" button is clicked, close the form
	$('#cancelShare').click(function() {
		$('#sharingForm').fadeOut();
		$('#share').fadeTo('slow', 1);
	});

	// When the "Escape" key is pressed, close the form
	$('#sharingForm').keydown(function(event) {
		if (event.which == 27) {
			$('#sharingForm').fadeOut();
			$('#share').fadeTo('slow', 1);
		}
	});

}

// Handle the Ajax response

function shareDone(response) {
	response = $.trim(response);
	$('#sharing').delay(2000).fadeOut();

	if (response == "success") {

		// Form submitted successfully

		// 1. Display the success message
		// 2. Clear the form fields
		// 3. Fade the content back in

		$('#shared').delay(messageDelay).fadeIn().delay(messageDelay).fadeOut();
		$('#names').val("");
		$('#message').val("");
		$('#share').delay(messageDelay + 500).fadeTo('slow', 1);

	} else {

		// Form submission failed: Display the failure message,
		// then redisplay the form
		$('#failed').fadeIn().delay(messageDelay).fadeOut();
		$('#sharingForm').delay(messageDelay + 500).fadeIn();
	}
	document.shareForm.message.value = "";
	var list = $(".token-input-token-facebook");
	list.html('');
}

</script>
<p>Tags :</p>
#{list items:idea.tags, as:'tag'}
<div class = "Tag">
<span class = "name">
<a class="standardLink" style="font:16px/26px Georgia, Garamond, Serif;"href = "@{Browse.advancedSearchResults(null, null,
			null, null, tag.id, 'all',
			null, null)}">
${tag.name}
</a>
</span>
</div>
#{/list}
#{/else}  
</br></br>




   </div>














